<script setup lang="ts">
import BasicHeader from "@/components/BasicHeader.vue";
import GlobalFooter from "@/components/GlobalFooter.vue";
import bgImage from "@/assets/imgs/Background.png";
import { useRoute } from "vue-router";
import { computed } from "vue";

const route = useRoute();
const hideFooter = computed(() => route.name === 'problemDetail');
const isProblemDetailPage = computed(() => route.name === 'problemDetail');
</script>

<template>
  <div class="w-full min-h-screen">
    <a-layout class="mx-auto min-h-screen flex flex-col">
      <a-layout-header class=" relative z-10" :style="{ backgroundColor: '#ffffff', boxShadow: '2px 1px 2px 2px rgba(0,0,0,0.2)' }">
        <BasicHeader />
      </a-layout-header>
      <a-layout-content
        class="flex-1 h-0"
        :class="isProblemDetailPage ? '' : 'bg-no-repeat bg-center'"
        :style="isProblemDetailPage ? {} : { backgroundImage: `url(${bgImage})`, backgroundSize: '100% 100%' }"
      >
        <router-view :class="isProblemDetailPage ? 'h-full' : ''"/>
      </a-layout-content>
      <a-layout-footer v-if="!hideFooter" class=" relative z-10" :style="{ backgroundColor: '#ffffff', boxShadow: '2px -1px 2px 2px rgba(0,0,0,0.2)' }">
        <GlobalFooter/>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<style scoped>

</style>
